<!DOCTYPE html>
<html lang="ch-zn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="./node_modules/bootstrap-icons/font/bootstrap-icons.css">
    <script src="./node_modules/bootstrap/dist/js/bootstrap.bundle.js"></script>
    <title>报纸订阅</title>
</head>

<body>

    <div class="container">
        <div class="include" file="headbar.html"></div>
        <br/><br/>
        <div class="row">
            <div class="input-group mb-3">
                <span class="input-group-text">账号</span>
                <input type="text" class="form-control" placeholder="账号" id="input_id" aria-label="账号" aria-describedby="basic-addon1">
            </div>
        </div>
        <div class="row">
            <div class="input-group mb-3">
                <span class="input-group-text" id="basic-addon1">报纸编号</span>
                <input type="text" class="form-control" placeholder="报纸编号" aria-label="报纸编号" aria-describedby="basic-addon1" id="paperid">
                <span class="input-group-text text-bg-secondary">AND</span>
                <span class="input-group-text" id="basic-addon2">订阅数量</span>
                <input type="text" class="form-control" placeholder="订阅数量" aria-label="订阅数量" aria-describedby="basic-addon2" id="papernum">
            </div>
        </div>

        <div>
            <div class="d-grid gap-2 col-4 mx-auto">
                <button type="button" class="btn btn-primary" type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#staticBackdrop" onclick="submit()">订阅</button>
            </div>
            <!-- Modal -->
            <div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h1 class="modal-title fs-5" id="staticBackdropLabel">请确定您的支付信息</h1>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            <div id="output"></div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" onclick="cancel_method()">关闭</button>
                            <button type="button" class="btn btn-primary" data-bs-dismiss="modal" onclick="ok_method()">确定</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
<script type="text/javascript" src="./node_modules/jquery/dist/jquery.js" charset="UTF-8"></script>
<script>
    $(".include").each(function() {
        if (!!$(this).attr("file")) {
            var $includeObj = $(this);
            $(this).load($(this).attr("file"), function(html) {
                $includeObj.after(html).remove(); //加载的文件内容写入到当前标签后面并移除当前标签
            })
        }
    });

    url0 = 'http://localhost:80/index.php/Mysql/';

    function submit() {
        var input_id = document.getElementById('input_id').value;
        var input_paperid = document.getElementById('paperid').value;
        var input_papernum = document.getElementById('papernum').value;
        var inputdata = {
            "input_id": input_id,
            "input_paperid": input_paperid,
            "input_papernum": input_papernum,
        }
        $.ajax({
            methods: "GET",
            url: url0 + "subscribe/",
            async: pageYOffset,
            contentType: "application/x-www-form-urlencoded",
            data: inputdata,
            dataType: "json",
            success: function(data) {
                //转成数组
                console.log(data);
                data_np = Object.values(data);
                console.log(data_np.length);
                console.log(typeof(data_np.length));

                //找到要输出的位置
                var output = document.getElementById('output');
                //初始化输出文本
                var value_np_out = "";
                value_np_out += "<table class='table'>" + "<thead>" + "<tr>" + "<th scope='col'>用户账号</th><th scope='col'>报纸编号</th><th scope='col'>订阅数量</th><th scope='col'>报纸单价</th><th scope='col'>日期</th><th scope='col'>总价</th>" + "</tr>" + "</thead>" + "<tbody > "
                value_np_out += "<tr>"
                for (i1 = 0; i1 < data_np.length; i1++) {
                    console.log(data_np);
                    value_np_out += "<td>" + data_np[i1] + "</td>";

                }
                value_np_out += "</tr>"
                console.log(value_np_out);
                value_np_out += "</tbody><table>"
                output.innerHTML = value_np_out;
            },
            error: function(err) {
                // 请求失败， err是失败的内容
                print("请求失败");
            },
            complete: function(e) {
                // 不管成功还是失败都会调用这个函数
            }
        })
    }

    function ok_method() {
        var input_id = document.getElementById('input_id').value;
        var input_paperid = document.getElementById('paperid').value;
        var input_papernum = document.getElementById('papernum').value;
        var inputdata = {
            "input_id": input_id,
            "input_paperid": input_paperid,
            "input_papernum": input_papernum,
        }
        $.ajax({
            methods: "GET",
            url: url0 + "ok/",
            async: pageYOffset,
            contentType: "application/x-www-form-urlencoded",
            data: inputdata,
            dataType: "json",
            success: function(data) {
                //转成数组
                if (data == "success") {
                    alert("支付成功！");
                }
            },
            error: function(err) {
                // 请求失败， err是失败的内容
                print("请求失败");
            },
            complete: function(e) {
                // 不管成功还是失败都会调用这个函数
            }
        })
    }

    function cancel_method() {
        alert("订阅失败，原因：用户取消订单！")
    }
</script>

</html>